<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>填写订单信息</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="order_head">
        <div class="head_background">
            <div class="head_box">
                <a href="index.html" class="head_left_a"><img src="img/logo.jpg" alt="" class="head_left_p"></a>
                <h1 class="head_h1">确认订单</h1>
                <div class="head_right">
                    <span class="head_right_in">1412625918 ∨</span>
                    <span class="head_right_in">|</span>
                    <a href="" class="head_right_in">我的订单</a>
                </div>

            </div>
        </div>
    </div>
    <div class="order_body">
        <div class="order_body_background">
            <div class="order_line">
                <div class="order_lien_in">
                    <h3 class="order_title">收货地址</h3>
                </div>
                <div class="order_lien_in">
                    <span class="order_span">|</span>
                    <span class="order_span">大型商场下单后,收货地址将无法修改.</span>
                </div>
                <div class="order_lien_in">
                    <a href="" class="order_a">快递公司会电话联系您确认送货时间,收货时需要核对身份信息</a>

                </div>
                <div class="order_lien_in"></div>
            </div>
            <div class="order_box">
                <div class="order_box_in" id="addressBox1">
                    <div class="order_box_circle"><p class="order_box_p1">+</p></div>
                    <p class="order_box_p">填加新地址</p>

                </div>
                <script>
                    document.getElementById('addressBox1').addEventListener('click', function() {
                        this.innerHTML = '<input type="text" class="address-input" placeholder="请输入详细地址">';
                    });
                </script>
                <div class="order_box_in" id="addressBox2">
                    <div class="order_box_circle"><p class="order_box_p1">+</p></div>
                    <p class="order_box_p">填加新地址</p>

                </div>
                <div class="order_box_in" id="addressBox3">
                    <div class="order_box_circle"><p class="order_box_p1">+</p></div>
                    <p class="order_box_p">填加新地址</p>

                </div>
                <script>
                    document.getElementById('addressBox1').addEventListener('click', function() {
                        this.innerHTML = '<input type="text" class="address-input" placeholder="请输入详细地址">';
                    });
                    document.getElementById('addressBox2').addEventListener('click', function() {
                        this.innerHTML = '<input type="text" class="address-input" placeholder="请输入详细地址">';
                    });
                    document.getElementById('addressBox3').addEventListener('click', function() {
                        this.innerHTML = '<input type="text" class="address-input" placeholder="请输入详细地址">';
                    });
                </script>
            </div>
            <div class="order_line order_line_bordtr">
                <div class="order_lien_in order_in">
                    <h3 class="order_title">支付方式</h3>
                </div>

                <div class="order_lien_in">
                    <a href="" class="order_a">在线支付(支持微信支付、支付宝、银联、财付通、小米钱包等）</a>

                </div>
                <div class="order_lien_in"></div>
            </div>
            <div class="order_line order_line_bordtr">
                <div class="order_lien_in order_in">
                    <h3 class="order_title">配送方式</h3>
                </div>

                <div class="order_lien_in">
                    <a href="" class="order_a">快递配送(运费100元)</a>

                </div>
                <div class="order_lien_in"></div>
            </div>
            <div class="order_line order_line_bordtr">
                <div class="order_lien_in">
                    <h3 class="order_title">配送时间</h3>
                </div>
                <p class="order_PStime" onclick="selectDeliveryTime(this)">不限送货时间：周一至周日</p>
                <p class="order_PStime" onclick="selectDeliveryTime(this)">工作日送货：周一至周五</p>
                <p class="order_PStime" onclick="selectDeliveryTime(this)">双休日、假日送货：周六至周日</p>
                <script>
                    function selectDeliveryTime(element) {
                        document.querySelectorAll('.order_PStime').forEach(el => {
                            el.style.backgroundColor = '';
                            el.style.color = '';
                        });
                        element.style.backgroundColor = '#ff6700';
                        element.style.color = 'white';
                        localStorage.setItem('selectedDeliveryTime', element.textContent);
                    }
                </script>
                <div class="order_lien_in"></div>
            </div>
            <div class="order_line order_line_bordtr_1">
                <div class="order_lien_in">
                    <h3 class="order_title">发票</h3>
                </div>
                <div class="order_lien_in order_line_bordtr_2">
                    <a href="" class="order_a">电子发票 个人 商品明细 修改 ></a>
                </div>
                <div class="order_lien_in"></div>
            </div>
            <div class="order_line order_line_bordtr">
                <div class="order_lien_in">
                    <h3 class="order_title">商品及优惠券</h3>
                </div>
                <div class="order_lien_in">

                    <a href="trolley.html"><span class="order_span_rigth">返回购物车</span></a>
                </div>

                <div class="order_lien_in"></div>
            </div>
            <div class="order_line order_line_bordtr">
                <div class="order_lien_in">
                    <img class="order_price_tv" style="height: 18px; width: 27px" src="img/A4.png" alt="">
                    <p class="order_price">小米电视A4 32寸 黑色 32 寸</p>
                </div>
                <div class="order_lien_in">
                    <p class="order_price_1">899元 x 1</p>
                </div>
                <div class="order_price1">
                    <p class="order_price_2">899元</p>

                </div>
                <div class="order_lien_in"></div>
            </div>
            <div class="order_line ">
                <div class="order_lien_in">
                    <p class="order_price_11">商品件数:</p>
                </div>
                <div class="order_price1">
                    <p class="order_price_2">1件</p>
                </div>
            </div>
            <div class="order_line ">
                <div class="order_lien_in">
                    <p class="order_price_11">金额合计:</p>
                </div>
                <div class="order_price1">
                    <p class="order_price_2">899元</p>
                </div>

            </div>
            <div class="order_line ">
                <div class="order_lien_in">
                    <p class="order_price_11">运费:</p>
                </div>
                <div class="order_price1">
                    <p class="order_price_2">100元</p>
                </div>
            </div>
            <div class="order_line order_line_bordtr">
                <div class="order_lien_in">
                    <p class="order_price_11"><br>应付总额:</p>
                </div>
                <div class="order_price1">
                    <p class="order_price_2"><span style="font-size: 35px">999</span>元</p>

                </div>
            </div>
            <div class="pay">
                <a href="#" class="pay_a">结算</a>
            </div>
        </div>
    </div>

    <div class="foot">
        <ul class="foot_ul">
            <li class="foot_li">预约维修服务</li>
            <li class="foot_li">7天无理由退货</li>
            <li class="foot_li">15天免费换货</li>
            <li class="foot_li">满15元包邮</li>
            <li class="foot_li foot_fot">520余家售后网点</li>
        </ul>
        <div class="foot_center">
            <div class="foot_cen_left">
                <dl class="foot_dl">
                    <dt class="foot_dt">帮助中心</dt>
                    <dd class="foot_dd"><a>账户管理</a></dd>
                    <dd class="foot_dd"><a>购物指南</a></dd>
                    <dd class="foot_dd"><a>订单操作</a></dd>
                </dl>
                <dl class="foot_dl">
                    <dt class="foot_dt">帮助中心</dt>
                    <dd class="foot_dd"><a>账户管理</a></dd>
                    <dd class="foot_dd"><a>购物指南</a></dd>
                    <dd class="foot_dd"><a>订单操作</a></dd>
                </dl>
                <dl class="foot_dl">
                    <dt class="foot_dt">帮助中心</dt>
                    <dd class="foot_dd"><a>账户管理</a></dd>
                    <dd class="foot_dd"><a>购物指南</a></dd>
                    <dd class="foot_dd"><a>订单操作</a></dd>
                </dl>
                <dl class="foot_dl">
                    <dt class="foot_dt">帮助中心</dt>
                    <dd class="foot_dd"><a>账户管理</a></dd>
                    <dd class="foot_dd"><a>购物指南</a></dd>
                    <dd class="foot_dd"><a>订单操作</a></dd>
                </dl>
                <dl class="foot_dl">
                    <dt class="foot_dt">帮助中心</dt>
                    <dd class="foot_dd"><a>账户管理</a></dd>
                    <dd class="foot_dd"><a>购物指南</a></dd>
                    <dd class="foot_dd"><a>订单操作</a></dd>
                </dl>
                <dl class="foot_dl">
                    <dt class="foot_dt">帮助中心</dt>
                    <dd class="foot_dd"><a>账户管理</a></dd>
                    <dd class="foot_dd"><a>购物指南</a></dd>
                    <dd class="foot_dd"><a>订单操作</a></dd>
                </dl>
            </div>
            <div class="foot_cen_right">
                <p class="foot-phone">400-100-5678</p>
                <p class="foot-right-center">周一至周日 8:00-18:00<br>（仅收市话费)</p>
                <a class="foot-right-bottmo" href="">联系客服</a>
            </div>
        </div>
    </div>
    <div class="fot_bot_max">
        <div class="fot_bot">
            <img src="img/logo.jpg" class="fot_bot_logo" >
            <div class="fot_bot_text">
                <p class="fot_bot_p">
                    <a class="fot_bot_a" href="">小米商城</a>
                    <span class="fot_bot_span">|</span>
                    <a class="fot_bot_a" href="">MIUI</a>
                    <span class="fot_bot_span">|</span>
                    <a class="fot_bot_a" href="">米家</a>
                    <span class="fot_bot_span">|</span>
                    <a class="fot_bot_a" href="">米聊</a>
                    <span class="fot_bot_span">|</span>
                    <a class="fot_bot_a" href="">多看</a>
                    <span class="fot_bot_span">|</span>
                    <a class="fot_bot_a" href="">游戏</a>
                    <span class="fot_bot_span">|</span>
                    <a class="fot_bot_a" href="">路由器</a>
                    <span class="fot_bot_span">|</span>
                    <a class="fot_bot_a" href="">米粉卡</a>
                    <span class="fot_bot_span">|</span>
                    <a class="fot_bot_a" href="">政企服务</a>
                    <span class="fot_bot_span">|</span>
                    <a class="fot_bot_a" href="">小米天猫店</a>
                    <span class="fot_bot_span">|</span>
                    <a class="fot_bot_a" href="">隐私政策</a>
                    <span class="fot_bot_span">|</span>
                    <a class="fot_bot_a" href="">问题反馈</a>
                    <span class="fot_bot_span">|</span>
                    <a class="fot_bot_a" href="">廉政举报</a>
                    <span class="fot_bot_span">|</span>
                    <a class="fot_bot_a" href="">Select Region</a>
                </p>
                <p class="fot_bot_p fot_bot_a1">
                    "©"
                    <a class="fot_bot_a1" href="">mi.con</a>
                    " 京ICP证110507号"
                    <a class="fot_bot_a1" href="">京ICP备10046444号</a>
                    <a class="fot_bot_a1" href="">京公网安备11010802020134号</a>
                    <a class="fot_bot_a1" href="">京网文[2017]1530-131号</a>
                    "<br>违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试"



                </p>
            </div>
            <div class="fot_bot_right">
                <a href="" class="fot_bot_right_img"><img src="img/foot_01.png" alt=""></a>
                <a href="" class="fot_bot_right_img"><img src="img/foot_02.png" alt=""></a>
                <a href="" class="fot_bot_right_img"><img src="img/foot_03.png" alt=""></a>
                <a href="" class="fot_bot_right_img"><img src="img/foot_04.png" alt=""></a>
                <a href="" class="fot_bot_right_img"><img src="img/foot_05.png" alt=""></a>
            </div>

        </div>
        <img class="fot_bottom_img" src="img/foot_06.png">
    </div>
</body>
</html>